<script setup>
import { ref, reactive, onMounted } from "vue"
import { getSensitiveAPI, addSensitiveAPI, getSensitiveByIdAPI, updateSensitiveAPI } from "@/api"
import msgUtils from "@/utils/message"


onMounted(async () => {
  getSensitiveList()
})
//敏感词列表参数
const params = reactive({
  page: 1,
  pageSize: 2,
  sensitives: ""
})

const addAndEditParams = ref({
  id: null,
  sensitives: "",
})
// 敏感词数据
const sensitiveList = ref([])
const total = ref(0)
const getSensitiveList = async () => {
  try {
    const res = await getSensitiveAPI(params)
    if (res.code === 200) {
      sensitiveList.value = res.data.rows
      total.value = res.data.total
    }
  } catch (err) {
    console.log(err);
  }
}

const changeName = (val) => {
  params.name = val
  getSensitiveList()
}
//分页
const pageChange = (page) => {
  params.page = page
  getSensitiveList()
}

const dialogVisible = ref(false)

//新增编辑
const comfirm = async () => {
  if (!addAndEditParams.value.id) {
    try {
      const res = await addSensitiveAPI(addAndEditParams.value)
      if (res.code === 200) {
        msgUtils("添加成功")
        dialogVisible.value = false
        getSensitiveList()
      } else {
        msgUtils("添加失败", "error")
      }
    } catch (err) {
      console.log(err);
    }
  } else {
    try {
      const res = await updateSensitiveAPI(addAndEditParams.value)
      if (res.code === 200) {
        msgUtils("编辑成功")
        dialogVisible.value = false
        getSensitiveList()
      } else {
        msgUtils("编辑失败", "error")
      }
    } catch (err) {
      console.log(err);
    }
  }

}

//关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false
  addAndEditParams.value = {
    id: null,
    sensitives: "",
  }
}

//获取敏感词详情
const getDetail = async (id) => {
  dialogVisible.value = true
  try {
    const res = await getSensitiveByIdAPI(id)
    if (res.code === 200) {
      addAndEditParams.value = res.data
    } else {
      msgUtils("查询信息失败", "error")
    }
  } catch (err) {
    console.log(err);
  }
}

const confirmDel = () => {

}
const cancelDel = () => { }


</script>
<template>
  <div class="sensitive-container">
    <el-card>
      <div class="aa">
        <el-form size="large">
          <el-form-item label="敏感词">
            <el-input v-model="params.sensitives" placeholder="请输入敏感词" @input="changeName" />
          </el-form-item>
        </el-form>
        <el-button type="primary" size="large" icon="Plus" @click="dialogVisible = true">新增敏感词</el-button>
      </div>
    </el-card>

    <el-card>
      <el-table :data="sensitiveList" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="sensitives" label="敏感词"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="getDetail(row.id)">编辑</el-button>
            <!-- 删除确认弹框 -->
            <el-popconfirm title="是否确认删除?" @confirm="confirmDel" @cancel="cancelDel" confirm-button-text="Yes"
              cancel-button-text="No">
              <template #reference>
                <el-button size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogVisible" width="40%" center :title="addAndEditParams.id ? '编辑敏感词' : '新增敏感词'"
      :before-close="closeDialog">
      <el-form :model="addAndEditParams">
        <el-form-item label="敏感词名称:" label-width="100px">
          <el-input v-model="addAndEditParams.sensitives" size="large" width="200px" maxlength="10" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="comfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-pagination size="large" background layout="prev, pager, next" :page-size="params.pageSize" :total="total"
      @current-change="pageChange" />
  </div>
</template>


<style lang="scss" scoped>
.aa {
  display: flex;
  justify-content: space-between;
}
</style>
